<template>
	<view class="container">
		<image class="bg-img" src="https://img.js.design/assets/img/631d64731154c46b978fbc93.jpg"></image>
		<view class="bg-box" >

			<view class="box-top">
				<!-- 店铺信息 -->
				<view style="margin-left: 20%; width:60%;border:3px solid rgba(255, 255, 255, 0.9);margin-top: 20rpx;position: absolute;"></view>
				<view class="item-top">
					
					<view class="item-top-left">
						<!-- 图片的填充 -->
						<image style="width: 100%; height: 100%;" :src="shop.imageUrl" mode=""></image>
					</view>
					<!-- 店铺名字 -->
					<view class="item-top-right">
						<text class="shop-name">{{shop.name}}</text><br /><br />
						<text class="shop-sales">月销：{{shop.sales}}</text>
					</view>
				</view>
				<view class="change">
					<u-tabs :list="list" active-color="rgba(255, 235, 59, 1)" :is-scroll="false" :current="current"
						@change="change"></u-tabs>
				</view>
			</view>
			<view class="box-top-shape">
				<view class="shape"></view>
				<view class="shape"></view>
				<view class="shape"></view>
				<view class="shape"></view>
				<view class="shape"></view>
			</view>
			
			<!-- 选菜信息 -->
			<view v-if="current===0" class="box-order">
				
				<!-- 左侧的滚动视图区域 -->
				<scroll-view class="left-scroll-view" scroll-y :style="{height: wh + 'px'}">
					<block v-for="(item, index) in cateList" :key="index">
						<view :class="['left-scroll-view-item', index === active ? 'active' : '']"
							@click="activeChanged(index)">{{item.type}}</view>
					</block>
				</scroll-view>
				<!-- 右侧菜品选项栏 -->
				<scroll-view class="right-scroll-view" scroll-y="true" :style="{height: wh + 'px'}" :scroll-into-view="bottomId" >
					<block class="right-scroll-view-itemList" v-for="(itemList, index) in cateList" :key="index">
						<view style="border:1px solid rgba(56, 56, 56, 1);margin-top: 10rpx;"></view>
						<view :id="'my'+index"></view>
						<view >{{itemList.type}}</view>
						<block class="right-scroll-view" v-for="(item,id) in cateList[index].Dishes" :key="id">
							<view class="right-scroll-view-item">
								<view class="dish-image">		
									<image style="width: 100%; height: 100%;" :src="item.imageUrl"></image>
								</view>
								<view class="dish-introduce">
									<view class="dish-introduce-text1">{{item.dishName}}</view>
									<view class="dish-introduce-text2">{{item.introduce}}</view>
									<view class="dish-introduce-text3">￥{{item.price}}</view>
								</view>
								<view @click="addDish(item.id)" style="width: 50rpx; height: 50rpx; background-color: rgba(255, 255, 255); position: absolute; margin-top: 15%;margin-left: 80%;">
									<view style="margin-top: 10rpx; margin-left: 10rpx;">
									  <u-icon size="15" name="plus"></u-icon>
									</view>
								</view>
							</view>
						</block>
					</block>
				</scroll-view>
				<my-shop style="margin-top: -20%; position: fixed;"></my-shop>
			</view>
			<!-- 商铺信息 -->
			<view v-else class="box-shop">
				<view class="shop-top">
					<view class="shop-text1">地址：{{shop.location}}</view>
					<view style="width: 80%; margin-left: 10%; border:1rpx solid rgba(255, 255, 255, 1.0);margin-top: 10rpx;"></view>
					<view class="shop-text2">营业时间：</view>
					<view class="shop-text2" style="margin-left: 30%;">
						{{shop.startTimeAM}}
					</view>
					<view class="shop-text2" style="margin-left: 30%;">
						{{shop.startTimePM}}
					</view>
				</view>
				<view class="shop-phone">
					<view class="shop-text3">联系电话：{{shop.phone}}</view>
				</view>
			</view>
		</view>
			
	</view>
</template>

<script>
	import { data } from "uview-ui/libs/mixin/mixin";
import {getDish} from "../../utils/api/customer.js"
	export default {
		data() {
			return {
				//加号
				jia_url:"",
				wh: 0,
				active: 0,
				list: [{
					name: '菜单'
				}, {
					name: '商家'
				}],
				current: 0,
				bottomId:null,
				//菜单
				cateList: [{
						index: 0,
						type: "汤饭系列",
						Dishes: [{
								id: 0,
								dishName: "拌饭1",
								introduce: "撒旦发射点是的",
								price: 8,
								imageUrl:"https://img.js.design/assets/smartFill/img399164da755928.jpg"
							},
							{
								id: 1,
								dishName: "拌饭1",
								introduce: "撒旦发射点是的",
								price: 9,
								imageUrl:"https://img.js.design/assets/smartFill/img399164da755928.jpg"
							}, {
								id: 2,
								dishName: "拌饭1",
								introduce: "撒旦发射点是的",
								price: 10,
								imageUrl:"https://img.js.design/assets/smartFill/img399164da755928.jpg"
								
							}, {
								id: 3,
								dishName: "拌饭1",
								introduce: "撒旦发射点是的",
								price: 11,
								imageUrl:"https://img.js.design/assets/smartFill/img399164da755928.jpg"
								
							}
						]
					},
					{
						index: 1,
						type: "加料区",
						Dishes: [{
								id: 0,
								dishName: "拌饭2",
								introduce: "撒旦发射点是的",
								price: 8,
								imageUrl:"https://img.js.design/assets/smartFill/img399164da755928.jpg"
								
							},
							{
								id: 1,
								dishName: "拌饭2",
								introduce: "撒旦发射点是的",
								price: 9,
								imageUrl:"https://img.js.design/assets/smartFill/img399164da755928.jpg"
								
							}, {
								id: 2,
								dishName: "拌饭2",
								introduce: "撒旦发射点是的",
								price: 10,
								imageUrl:"https://img.js.design/assets/smartFill/img399164da755928.jpg"
								
							}, {
								id: 3,
								dishName: "拌饭2",
								introduce: "撒旦发射点是的",
								price: 11,
								imageUrl:"https://img.js.design/assets/smartFill/img399164da755928.jpg"
								
							}

						]
					},
					{
						index: 2,
						type: "拌饭系列",
						Dishes: [{
								id: 0,
								dishName: "拌饭3",
								introduce: "撒旦发射点是的",
								price: 8,
								imageUrl:"https://img.js.design/assets/smartFill/img399164da755928.jpg"
								
							},
							{
								id: 1,
								dishName: "拌饭3",
								introduce: "撒旦发射点是的",
								price: 9,
								imageUrl:"https://img.js.design/assets/smartFill/img399164da755928.jpg"
								
							}, {
								id: 2,
								dishName: "拌饭3",
								introduce: "撒旦发射点是的",
								price: 10,
								imageUrl:"https://img.js.design/assets/smartFill/img399164da755928.jpg"
								
							}, {
								id: 3,
								dishName: "拌饭3",
								introduce: "撒旦发射点是的",
								price: 11,
								imageUrl:"https://img.js.design/assets/smartFill/img399164da755928.jpg"
								
							}

						]
					}
				],
				shop:{
					name:"五谷鱼粉",
					sales: 50,
					imageUrl: "https://img.js.design/assets/smartFill/img399164da755928.jpg",
					location:"西区餐厅一楼12号",
					startTimeAM:"8:00-12:00",
					startTimePM:"5:00-9:00",
					phone:"12345678"
				}

			};
		},
		onLoad(option) {
			// 获取当前系统的信息
			const sysInfo = uni.getSystemInfoSync()
			// 为 wh 窗口可用高度动态赋值
			this.wh = sysInfo.windowHeight
			this.getCateList(option.id)
		},
		methods: {
			//获取商铺信息
			getCateList(id){
				//获取菜品信息
				getDish(id).then(res=>{
					this.cateList =  res.data.data.cateList
				})
				//获取商铺信息
				// getShop(id).then(res=>{
					
				// })
			},
			change(index) {
				this.current = index.index
			},
			// 选中项改变的事件处理函数,右侧菜单栏改变
			activeChanged(id) {
				this.active=id
				this.bottomId='my'+id
			},
			//添加菜品
			addDish(id){
				console.log(id)
			}
			
		}
	}
</script>

<style lang="scss">
	.bg-img {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: -1;
		//opacity: 0.4; 透明度
	}

	.bg-box {
		background: rgba(255, 255, 255, 0.4);
		border-radius: 160rpx 160rpx 0rpx 0rpx;
		height: 100%;
	}

	.container {
		height: 100%;
	
	}

	.box-top {
	
		margin-top: 5%;
		height: 300rpx;
		width: 100%;
		background: rgba(255, 255, 255, 0.7);
		border-radius: 160rpx 160rpx 0rpx 0rpx;
		position: relative;

		.change {
			position: absolute;
			bottom: 10%;
			right: 5%;

		}
	}

	.box-top-shape {
		display: flex;
		flex-direction: row;
		justify-content: left;

		.shape {
			margin-left: 20rpx;
			width: 15.5%;
			height: 50rpx;
			background: rgba(255, 255, 255, 0.7);
			border-radius: 0rpx 0rpx 2000rpx 2000rpx;
		}
	}

	.box-shop {
	
		.shop-top {
			margin-left: 2%;
			width: 96%;
			height: 300rpx;
			opacity: 1;
			border-radius: 10px;
			background: rgba(255, 255, 255, 0.4);
			box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
			.shop-text1{
				margin-left: 10%;
			}
			.shop-text2{
				margin-left: 10%;
				margin-top: 20rpx;
			}
		}

		.shop-phone {
			margin-top: 20rpx;
			height: 150rpx;
			margin-left: 2%;
			width: 96%;
			opacity: 1;
			border-radius: 10px;
			background: rgba(255, 255, 255, 0.4);
			box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
			.shop-text3{
				margin-left: 10%;
				margin-top: 20rpx;
			}
		}
	}

	.box-order {
		display: flex;

		.left-scroll-view {
			width: 25%;

			.left-scroll-view-item {
				line-height: 60px;
				background-color: rgba(255, 255, 255, 0.7);
				text-align: center;
				font-size: 12px;
				margin-top: 20rpx;

				// 激活项的样式
				&.active {
					background-color: rgba(255, 255, 255, 0.2);
					position: relative;

					// 渲染激活项左侧的红色指示边线
					&::before {
						content: ' ';
						display: block;
						width: 3px;
						height: 30px;
						background-color: rgba(255, 255, 255, 0.2);
						position: absolute;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
					}
				}
			}
		}
	}

// 右侧菜单
	.right-scroll-view {
		//第一层循环
		.right-scroll-view-itemList {
			//第二层循环
			.right-scroll-view {
				//单个菜品
				
			}
		}
	}
	.right-scroll-view-item {
		margin-top: 10rpx;
		display: flex;
		flex-direction: row;
		border-radius: 10px 0px, 0px, 10px;
		background: rgba(255, 255, 255, 0.2);
		box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
		.dish-image{
			width: 35%;
			height: 80px;
		}
		//中间字体样式
		.dish-introduce{
			margin-left: 20rpx;
			.dish-introduce-text1{
				margin-top: 10rpx;
				font-size: 14px;
				font-weight: 500;
				color: rgba(0, 0, 0, 1);
			}
			.dish-introduce-text2{
				margin-top: 10rpx;
				font-size: 10px;
				font-weight: 500;
				color: rgba(82, 82, 82, 1);
			}
			.dish-introduce-text3{
				margin-top: 10rpx;
				font-size: 18px;
				font-weight: 700;
				color: rgba(0, 0, 0, 1);
			}
		}
		
	}
	//顶部介绍
	.item-top {
		width: 70%;
		margin-left: 15%;
		margin-top: 30px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		position: absolute;
	
		.item-top-left {
			background-color: aqua;
			width: 30%;
			height: 60px;
		}

		.item-top-right {
			width: 50%;
			margin-top: 15rpx;
	
			.shop-name {
				font-size:20px;
				font-weight: 700;
				line-height: 0px;
				color: rgba(0, 0, 0, 1);
				text-align: center;
			
			}
			.shop-sales {
				font-size: 12px;
				font-weight: 500;
				letter-spacing: 0px;
				line-height: 0px;
				color: rgba(0, 0, 0, 1);
			}
	
	
		}
	
	}

</style>
